<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Moonbay</title>
    <link rel="icon" type="image/x-icon" href="picture/图标logo.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/ranking.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
    <div class="head">
        <ul>
            <li class="first">
                <a href="###">
                    <img src="image/logo2.png">
                </a>
            </li>
            <li class="center"><a href="index.html">Home</a></li>
            <li class="center"><a href="mymusic.html">My Music</a></li>
            <li class="center"><a href="singer.html">singer</a></li>
            <li class="center spe"><a href="ranking.html">Top</a></li>
            <li class="center"><a href="radio.html">Radio</a></li>
            <li class="login"><a href="re.html">Register</a></li>
            <li class="login"><a href="login.html">Login</a></li>
            <li class="login dotted"></li>
            <li class="login search">
                <input type="text" class="tex">
                <button class="btn"><i class="iconfont icon-sousuo"></i></button>
            </li>
        </ul>
    </div>
    <div class="ranking ban clearfix">
        <div class="lf">
            <h3>Popular List</h3>
            <a href="javascript:;" class="lf-item active">Popularity Index List</a>
            <a href="javascript:;" class="lf-item">Hot Songs List</a>
            <a href="javascript:;" class="lf-item">New Music List</a>
            <a href="javascript:;" class="lf-item">The soaring List</a>
            <a href="javascript:;" class="lf-item">MV List</a>
            <h3>List of regions</h3>
            <a href="javascript:;" class="lf-item">Mainland List</a>
            <a href="javascript:;" class="lf-item">HongKong Regional List</a>
            <a href="javascript:;" class="lf-item">Taiwan Region List</a>
            <a href="javascript:;" class="lf-item">Europe List</a>
            <a href="javascript:;" class="lf-item">Korea List</a>
            <a href="javascript:;" class="lf-item">Japanese List</a>
            <h3>List of Features</h3>
            <a href="javascript:;" class="lf-item">List of Douyin</a>
            <a href="javascript:;" class="lf-item">Internet Song List</a>
            <a href="javascript:;" class="lf-item">Electric sound List</a>
            <a href="javascript:;" class="lf-item">ACG's New Hit List</a>
            <a href="javascript:;" class="lf-item">National Hot Song List</a>
            <a href="javascript:;" class="lf-item">Film and Television Hit List</a>
            <a href="javascript:;" class="lf-item">Rap List</a>
            <h3>The Global List</h3>
            <a href="javascript:;" class="lf-item">YouTube Music List</a>
            <a href="javascript:;" class="lf-item">Us Billboard chart</a>
            <a href="javascript:;" class="lf-item">Melon in South Korea </a>
            <a href="javascript:;" class="lf-item">The UK List</a>
            <a href="javascript:;" class="lf-item">Japan Public Trust Board</a>
            <a href="javascript:;" class="lf-item">Japan's Oricon list</a>
            <a href="javascript:;" class="lf-item">Hong Kong list</a>

        </div>
        <div class="rg">
            <h3>Popularity Index List</h3>
            <div class="rg-title clearfix">
                <div class="list"></div>
                <div class="rg-tit">song</div>
                <div class="rg-n">Singer</div>
                <div class="rg-time">duration</div>
            </div>
            <a href="#">
                <div class="rg-item clearfix">
                    <div class="list active">1</div>
                    <div class="rg-tit">
                        <img src="picture/ranking.jpg" alt="">
                        麻雀
                    </div>
                    <div class="rg-n">李荣浩</div>
                    <div class="rg-time">04:12</div>
                </div>
            </a>
            <a href="#">
                <div class="rg-item clearfix">
                    <div class="list active">2</div>
                    <div class="rg-tit">
                        <img src="picture/ranking1.jpg" alt="">
                        陪你去流浪
                    </div>
                    <div class="rg-n">薛之谦</div>
                    <div class="rg-time">04:34</div>
                </div>
            </a>
            <a href="#">
                <div class="rg-item clearfix">
                    <div class="list active">3</div>
                    <div class="rg-tit">
                        <img src="picture/first.jpg" alt="">
                        星宿
                    </div>
                    <div class="rg-n">徐均朔</div>
                    <div class="rg-time">03:37</div>
                </div>
            </a>
            <div class="rg-item clearfix">
                <div class="list">4</div>
                <div class="rg-tit">
                    <img src="picture/ranking2.jpg" alt="">
                    欧若拉 (完整版)
                </div>
                <div class="rg-n">胜屿</div>
                <div class="rg-time">03:43</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">5</div>
                <div class="rg-tit">
                    <img src="picture/first10.webp" alt="">
                    爱人错过
                </div>
                <div class="rg-n">告五人</div>
                <div class="rg-time">04:52</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">6</div>
                <div class="rg-tit">
                    <img src="picture/ranking3.jpg" alt="">
                    vip
                </div>
                <div class="rg-n">李艺玟Evan / 永彬Ryan.B</div>
                <div class="rg-time">03:11</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">7</div>
                <div class="rg-tit">
                    <img src="picture/ranking4.jpg" alt="">
                    fly
                </div>
                <div class="rg-n">岑宁儿</div>
                <div class="rg-time">03:52</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">8</div>
                <div class="rg-tit">
                    <img src="picture/ranking5.jpg" alt="">
                    飞
                </div>
                <div class="rg-n">者思范Remix</div>
                <div class="rg-time">03:39</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">9</div>
                <div class="rg-tit">
                    <img src="picture/frist11.jpg" alt="">
                    同桌的你
                </div>
                <div class="rg-n">胡夏</div>
                <div class="rg-time">04:30</div>
            </div>
            <div class="rg-item clearfix">
                <div class="list">10</div>
                <div class="rg-tit">
                    <img src="picture/ranking6.jpg" alt="">
                    重演
                </div>
                <div class="rg-n">王巨星</div>
                <div class="rg-time">03:43</div>
            </div>
        </div>
    </div>
</body>

</html>